<template>
  <el-row>
    <el-row>
      <el-form :model="formInline" class="search_prod" label-width="94px">
        <el-form-item label="条件筛选">
          <el-col :span="24" class>
            <div
              class="tl fx"
              style="line-height:    display: flex; 32px;justify-content: flex-start;"
            >
              <div style="width:430px;display: flex;" class="search-form-line fx">
                <div class="search-form-line-left">创建时间</div>
                <el-date-picker
                  style="    width: auto;"
                  v-model="createTime"
                  type="datetimerange"
                  size="small"
                  align="right"
                  unlink-panels
                  clearable
                  value-format="timestamp"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :picker-options="pickerOptions2"
                ></el-date-picker>
              </div>
              <el-select
                v-model="formInline.types"
                style="margin-left:24px;width:110px;display:inline-block"
                clearable
                size="small"
                placeholder="加-减"
              >
                <el-option
                  v-for="item in addList"
                  size="small"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
              <div style="margin-left:24px;display: flex;height:34px;line-height: 34px;">
                <div class="fx search-form-center">
                  <el-select
                    v-model="status"
                    style="width:160px;border-right: 1px solid #d6ddeb;"
                    size="small"
                    placeholder="搜索类型"
                  >
                    <el-option
                      v-for="item in searchList"
                      size="small"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <el-input size="small" clearable v-model="search" placeholder="请输入内容"></el-input>
                </div>
                <el-button
                  @click="subOrderInfo"
                  class="right-searct-buton"
                  style="border-right:none"
                  type="primary"
                  icon="el-icon-search"
                ></el-button>
              </div>
              <el-col class="tl top_weiy" :span="6">
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  type="primary"
                  @click="delOrderInfo"
                >一键清除</el-button>
              </el-col>
            </div>
          </el-col>
        </el-form-item>
      </el-form>
    </el-row>
    <el-form :model="formInline" class="search_prod" label-width="94px">
      <el-form-item label="账户类型">
        <el-row class="tl mar_bottom_15">
          <el-radio-group v-model="cate" size="small" class="tl money-group">
            <el-radio-button label>不限</el-radio-button>
            <el-radio-button
              v-for="(item,i) in moneyList"
              :label="item.iden"
              :key="i"
            >{{item.title}}</el-radio-button>
          </el-radio-group>
        </el-row>
      </el-form-item>
      <el-form-item label="项目类型">
        <el-row class="tl mar_bottom_15">
          <el-col :span="3">
            <el-select
              v-model="plugin"
              style="width:100%;border:none;"
              size="small"
              placeholder="请选择搜索类型"
            >
              <el-option
                v-for="item in rewarPlugin"
                size="small"
                :key="item.iden"
                :label="item.title"
                :value="item.iden"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="21" class="tl" style="padding:0 24px" v-show="plugin!=''">
            <el-radio-group v-model="style" size="small" class="tl money-group">
              <el-radio-button label>不限</el-radio-button>
              <el-radio-button
                v-for="(item,i) in rewarPluginItem"
                :label="item.iden"
                :key="i"
              >{{item.title}}</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-row>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "productSearch",
  data() {
    return {
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      radio5: "",
      createTime: [],
      formInline: {
        created_time_begin: "",
        created_time_end: "",
        types: "",
        oid: ""
      },
      searchList: [
        { id: "username", title: "会员账号" },
        { id: "nickname", title: "用户昵称" },
        { id: "ly_id", title: "来源ID" },
        { id: "ly_name", title: "来源名称" },
        { id: "oid", title: "订单号" },
        { id: "balance", title: "余额" }
      ],
      addList: [
        { id: "1", title: "加" },
        { id: "2", title: "减" }
      ],
      moneyList: [],
      rewardList: [],
      cate: "",
      style: "",
      plugin:'money',
      status: "username",
      search: "",
    };
  },
  computed: {
    ...mapState({
      rewarPlugin: state => state.rewardPlugin,
    }),
    rewarPluginItem() {
      const {  plugin } = this;
      var arr = [];
      var rewarPlugin=this.rewarPlugin;

      for(var i in rewarPlugin){
        if(rewarPlugin[i].iden==plugin){
          arr = rewarPlugin[i].reward;
        }
      }

      return arr;
    }
  },
  methods: {
    
    delOrderInfo() {
      this.formInline = {
        created_time_begin: "",
        created_time_end: "",
        types: "",
        oid: ""
      };
      this.$emit("sendSearch", this.formInline);
    },
    subOrderInfo() {
      console.log(this.status, this.search);

      // this.$set(this.formInline, this.status, this.search);
      console.log(this.formInline);
      this.formInline[this.status] = this.search;
      
      // var type = this.formInline.types;
      // var starTime = this.formInline.created_time_begin;
      // var endTime = this.formInline.created_time_end;

      this.$emit("sendSearch", this.formInline);
      // this.formInline = {
      //   types: type,
      //   created_time_begin: starTime,
      //   created_time_end: endTime,
      // };
    },
    getOneList() {
      var params = {};
      this.$api.getUser.getsearch_money(params).then(res => {
        if (res.data.code == 200) {
          this.moneyList = res.data.result;
        }
      });
    },
    getTwoList() {
      var params = {};
      this.$api.getUser.getsearch_reward(params).then(res => {
        if (res.data.code == 200) {
          this.rewardList = res.data.result;
        }
      });
    },
    exportExcel() {
      var params = JSON.parse(JSON.stringify(this.formInline));
      this.$fnc.postExcelFile(params, "/api/admin/export/money");
    }
  },
  created() {
    this.getOneList();
    // this.getTwoList();
    this.$store.dispatch('getRewardPlugin')
  },
  watch: {
    createTime(val) {
      if (val != null) {
        this.formInline.created_time_begin = this.$fnc.phptime(val[0]);
        this.formInline.created_time_end = this.$fnc.phptime(val[1]);
      } else {
        this.formInline.created_time_begin = "";
        this.formInline.created_time_end = "";
      }
    },
    cate(val) {
      this.formInline[this.status] = this.search;
      var params = this.formInline;
      params.plugin = this.plugin;
      params.cate = val;
      this.$emit("sendMoney", params);
    },
    plugin(val){
      this.formInline[this.status] = this.search;
      var params = this.formInline;
      params.cate = this.cate;
      params.plugin = val;
      params.style = '';
      this.style='';
      this.$emit("sendMoney", params);
    },
    style(val) {
      this.formInline[this.status] = this.search;
      var params = this.formInline;
      params.cate = this.cate;
      params.style = val;
      this.$emit("sendMoney", params);
    },
    status(val) {
      for (var i in this.formInline) {
        for (var j in this.searchList) {
          if (i == this.searchList[j].id && val != this.searchList[j].id) {
            this.formInline[i] = "";
          }
        }
      }
    }
  }
};
</script>
